<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import { clear, join, list, update } from './data'
import { imagePath } from '@/libs/file-utils'

const img_banner = imagePath('community/group/advanced/banner.png')
const icon_group = imagePath('community/group/advanced/icon-group.png')
const btn_bg = imagePath('community/group/normal/btn-bg.png')

const toFeedback = () => uni.navigateTo({ url: '/pages/user/feedback/index' })

onMounted(update)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="community-group-normal"
    :pageStyle="{ backgroundColor: '#FDEDFF' }"
  >
    <div
      class="banner"
      :style="{ backgroundImage: img_banner }"
    ></div>

    <div
      v-for="(item, index) in list"
      :key="index"
      class="item"
    >
      <div
        class="icon"
        :style="{ backgroundImage: icon_group }"
      ></div>
      <div class="info">
        <div class="name">{{ item.groupName }}</div>
        <div>{{ item.groupDesc }}</div>
      </div>
      <div
        class="btn"
        @click="join(item.id)"
      >付费进群</div>
    </div>

    <div class="tip">综合匹配度较高的群聊</div>

    <div
      class="feedback"
      :style="{ backgroundImage: btn_bg }"
      @click="toFeedback"
    >反馈</div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.banner {
  width: 750rpx;
  height: 398rpx;

  margin-bottom: 28rpx;
}

.item {
  width: 686rpx;

  margin: 0 auto 14rpx;

  box-sizing: border-box;
  padding: 30rpx 20rpx;

  border-radius: 24rpx;
  background-color: #F3D5FF;
  box-shadow: 0 2rpx 4rpx 0 rgba(#fff, .57) inset, 0 0 6rpx 0 rgba(70, 0, 48, .25) inset, 0 4rpx 5rpx 0 rgba(147, 0, 210, .11);

  display: flex;
  align-items: center;

  .icon {
    width: 100rpx;
    height: 100rpx;
  }

  .info {
    margin: 0 16rpx;
    flex: 1;

    color: #5E0066;
    font-size: 24rpx;
    line-height: 34rpx;

    .name {
      margin-bottom: 10rpx;
      font-size: 48rpx;
      line-height: 48rpx;
    }
  }

  .btn {
    width: 188rpx;
    height: 64rpx;

    border-radius: 32rpx;
    background-color: #ED69FF;

    color: #fff;
    font-size: 32rpx;
    line-height: 64rpx;
    text-align: center;
  }
}

.tip {
  margin-top: 52rpx;

  color: rgba(94, 0, 102, .7);
  font-size: 28rpx;
  line-height: 40rpx;
  text-align: center;
}

.feedback {
  width: 309rpx;
  height: 117rpx;

  margin: 16rpx auto 100rpx;

  color: #fff;
  font-size: 48rpx;
  text-align: center;
  line-height: 100rpx;
}
</style>